<template>
  <div class="wrapper">
    <div class="box-zdyj zdList" v-if="role.roleKey === 'admin' || $store.getters.isMzRole || role.roleKey === 'GUIDANCE_EXPERT'">
      <div class="title">指导意见</div>
      <div class="scrollBox timeBox" v-if="replyList.length > 0">
        <div v-for="item in replyList" :key="item.id">
          <div class="time shzz" v-if="item.type === null">
            <div class="info">
              <div class="icon">
                <img src="@/assets/images/user.png" alt="">
              </div>
              <div class="text">
                <div class="name">社会组织</div>
                <div class="time">{{ item.createTime }}</div>
              </div>
            </div>
            <div class="content">
              {{ item.content }}
            </div>
          </div>
          <div class="time zdls" v-else>
            <div class="info">
              <div class="text">
                <div class="name">指导老师</div>
                <div class="time">{{ item.createTime }}</div>
              </div>
              <div class="icon">
                <img src="@/assets/images/user.png" alt="">
              </div>
            </div>
            <div class="content">
              {{ item.content }}
            </div>
          </div>
        </div>
      </div>
      <div class="scrollBox timeBox" v-else>
        <a-empty />
      </div>
    </div>
    <div v-else class="box1 zdList" style="height: 20%;">
      <div class="title">备注说明</div>
      <div style="padding-bottom: 5px;" class="scrollBox timeBox" v-if="detail.comment">{{ detail.comment }}</div>
    </div>
    <div class="box1 kfList" v-if="role.roleKey === 'admin' || $store.getters.isMzRole || role.roleKey === 'EXPERT'">
      <div class="title">扣分原因</div>
      <div class="scrollBox" v-if="reasonList.length > 0">
        <div v-for="item in reasonList" :key="item.id" class="pszjList">
          <div class="time pszj">
            <div class="info">
              <div class="left">
                <div class="text">
                  <div class="name">{{ item.userName }}</div>
                  <div class="time">{{ item.createTime }}</div>
                </div>
              </div>
              <div class="score">
                分数：{{ item.score }} / {{ detail.targetManagement?.totalPoint }}
              </div>
            </div>
            <div v-if="item.annotation" class="content">
              {{ item.annotation || '--' }}
            </div>
          </div>
        </div>
      </div>
      <div class="scrollBox" v-else>
        <a-empty />
      </div>
    </div>
    <div class="box3 zdForm" v-if="role.roleKey === 'GUIDANCE_EXPERT'">
      <!-- <div class="scrollBox"> -->
        <div class="list">
          <div class="item yj">
            <a-textarea
              placeholder="请输入指导意见"
              v-model="replyContent"
              :rows="4"
            ></a-textarea>
            <!--<a-button class="btn" @click="addReply" :loading="replyLoading">
              提交
            </a-button>-->
          </div>
          <div class="item score">
            <!-- <a-input-number
              placeholder="请输入指导分数"
              v-model="scoreContent"
              :min="0"
              :max="detail.targetManagement ? +detail.targetManagement.totalPoint : 0"
              class="input"
            /> -->
            <el-input v-model="scoreContent" style="width: 145px;margin-right: 15px;"  @input="inputScore" @blur="inputBlur" clearable placeholder="请输入指导分数"></el-input>
            <div class="all">总分:{{ detail.targetManagement?.totalPoint }}分</div>

          </div>
          <div class="item">
            <a-button type="primary" @click="handleZD" :loading="scoreLoading">
              确定
            </a-button>
          </div>
        </div>
      <!-- </div> -->
    </div>
    <div class="box3 psForm" v-if="role.roleKey === 'EXPERT'">
      <div class="list">
        <div class="item score">
          <!-- <a-input-number
            placeholder="请输入分数"
            v-model="scoreContent"
            :min="0"
            :max="detail.targetManagement ? +detail.targetManagement.totalPoint : 0"
            @input="inputScore"
            class="input"
          /> -->
          <el-input v-model="scoreContent" style="width: 145px;margin-right: 15px;"  @input="inputScore" @blur="inputBlur" clearable placeholder="请输入分数"></el-input>
          <div class="all">总分:{{ detail.targetManagement?.totalPoint }}分</div>
        </div>
        <div class="item">
          <a-textarea
            placeholder="请输入扣分原因"
            v-model="annotation"
            :rows="4"
          ></a-textarea>
        </div>
        <div class="item">
          <a-button type="primary" @click="handlePS" :loading="scoreLoading">
            确定
          </a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import bus from '@/utils/bus'
import { getReplyListByRecord, addReply, scoreRecord, getScoreReason } from '@/api/system'
export default {
  props: {
  },
  watch: {
  },
  data () {
    this.formLayout = {
      labelAlign: 'left',
      labelCol: {
        span: 24
      },
      wrapperCol: {
        span: 24
      }
    }
    return {
      timer: null,
      targetDeclarationRecordId: null,
      detail: {},
      replyExpand: false,
      replyList: [],
      loading: false,
      replyLoading: false,
      replyContent: '',
      scoreLoading: false,
      scoreContent: '',
      annotation: '',
      reasonList: []
    }
  },
  computed: {
    role () {
      return this.$store.getters.roles
    },
    userInfo () {
      return this.$store.getters.userInfo
    }
  },
  created () {
  },
  deactivated () {
    console.log('deactivated')
    if (this.timer) {
      window.clearInterval(this.timer)
      this.timer = null
    }
  },
  beforeDestroy () {
    console.log('beforeDestroy')
    if (this.timer) {
      window.clearInterval(this.timer)
      this.timer = null
    }
  },
  methods: {
    guidanceView (detail) {
      this.detail = detail
      this.targetDeclarationRecordId = detail.id
      // this.replyList = detail.replyList || []
      if (this.role.roleKey === 'GUIDANCE_EXPERT') {
        this.replyLoading = false
        this.replyContent = ''
        this.scoreLoading = false
        this.scoreContent = detail.lookScore || ''
      } else if (this.role.roleKey === 'EXPERT') {
        this.scoreLoading = false
        this.scoreContent = detail.lookScore || ''
        this.annotation = detail.lookAnnotation || ''
      }
      // this.$nextTick(() => {
      //   document.querySelector('.timeBox').scrollTop = document.querySelector('.timeBox').scrollHeight
      // })
      this.replyList = []
      if (this.role.roleKey === 'admin' || this.role.roleKey === 'EXPERT') {
        this.reasonList = []
        this.getScoreReason()
      }
      this.getReply()
      if (this.role.roleKey === 'admin' || this.role.roleKey === 'GUIDANCE_EXPERT') {
        this.setTimer()
      }
    },
    getReply () {
      // 防止回复列表错乱
      if (!this.loading) {
        if (this.replyList.length > 0) {
          this.getReplyList(this.replyList[this.replyList.length - 1].id)
        } else {
          this.getReplyList()
        }
      }
    },
    setTimer () {
      window.clearInterval(this.timer)
      if (!this.timer) {
        this.timer = window.setInterval(() => {
          this.getReply()
        }, 5000)
      }
    },
    getReplyList (id) {
      this.loading = true
      getReplyListByRecord({
        id,
        targetDeclarationRecordId: this.targetDeclarationRecordId
      }).then(res => {
        if (res.length > 0) {
          this.replyList = [...this.replyList, ...res]
          this.$nextTick(() => {
            if (document.querySelector('.timeBox')) {
              document.querySelector('.timeBox').scrollTop = document.querySelector('.timeBox').scrollHeight
            }
          })
        }
      }).finally(() => {
        this.loading = false
      })
    },
    getScoreReason () {
      getScoreReason({
        targetDeclarationRecordId: this.targetDeclarationRecordId,
        userId: this.role.roleKey === 'EXPERT' ? this.userInfo.user.userId : ''
      }).then(res => {
        this.reasonList = res
      })
    },
    // 指导老师
    handleZD () {
      if (this.replyContent.trim() !== '') {
        addReply({
          content: this.replyContent.trim(),
          targetDeclarationRecordId: this.targetDeclarationRecordId
        }).then(res => {
          this.replyContent = ''
          this.getReply()
        })
      }
      // if (this.scoreContent !== 0 && this.scoreContent !== '0' && +this.scoreContent === 0) {
      //   this.$message.error('请输入指导分数!')
      //   return
      // }
      this.scoreLoading = true
      scoreRecord({
        type: 1,
        score: this.scoreContent || 0,
        userId: this.userInfo.user.userId,
        targetDeclarationRecordId: this.targetDeclarationRecordId
      }).then(res => {
        this.$message.success('打分成功')
        this.visible = false
        bus.$emit('toRefreshData', 'scoreSuccess')
      }).finally(() => {
        this.scoreLoading = false
      })
    },
    // 指导老师
    addReply () {
      if (this.replyContent.trim() === '') {
        this.$message.error('请输入指导意见!')
        return
      }
      this.replyLoading = true
      addReply({
        content: this.replyContent.trim(),
        targetDeclarationRecordId: this.targetDeclarationRecordId
      }).then(res => {
        this.$message.success('提交成功')
        this.replyContent = ''
        this.getReply()
      }).finally(() => {
        this.replyLoading = false
      })
    },
    inputScore(data) {
      let calcNumber = this.clearNoNum(data)
      let maxNumber = this.detail.targetManagement?.totalPoint || 0
      if (maxNumber > 0 && Number(calcNumber) > Number(maxNumber)) {
        calcNumber = maxNumber
      }
      this.scoreContent = calcNumber
    },
    inputBlur() {
      let lastStr = this.scoreContent.slice(-1)
      if (lastStr == '.') {
        this.scoreContent = this.scoreContent.slice(0, -1)
      }
    },
    clearNoNum(value) {
      value = value.replace(/[^\d.]/g, '') // 清除"数字"和"."以外的字符
      value = value.replace(/^\./g, '') // 验证第一个字符是数字而不是字符
      value = value.replace(/\.{2,}/g, '.') // 只保留第一个.清除多余的
      value = value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
      value = value.replace(/^(-)*(\d+)\.(\d).*$/, '$1$2.$3') // 只能输入1位小数
      if (value.indexOf('.') < 0 && value !== '') {
        value = parseFloat(value)
      }
      return value
    },
    // 评审专家
    handlePS () {
      // if (this.scoreContent !== 0 && this.scoreContent !== '0' && +this.scoreContent === 0) {
      //   this.$message.error('请输入分数!')
      //   return
      // }
      // else if (+this.scoreContent < +this.detail.targetManagement.totalPoint && this.annotation.trim() === '') {
      //   this.$message.error('请输入扣分原因!')
      //   return
      // }
      this.scoreLoading = true
      scoreRecord({
        type: 2,
        score: this.scoreContent || 0,
        annotation: this.annotation.trim(),
        userId: this.userInfo.user.userId,
        targetDeclarationRecordId: this.targetDeclarationRecordId
      }).then(res => {
        this.$message.success('打分成功')
        this.visible = false
        bus.$emit('toRefreshData', 'scoreSuccess')
      }).finally(() => {
        this.scoreLoading = false
      })
    }
  }
}
</script>
<style lang="less" scoped>
.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  // overflow: auto;
}
.title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  font-size: 16px;
  padding: 0 16px;
  .flex-start();
}
.scrollBox {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 0 15px;
  &::-webkit-scrollbar {
    width: 4px;
  }
  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
    box-shadow: inset 0 0 5px #c1c1c1;
  }
  &::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 0;
    box-shadow: inset 0 0 5px transparent;
  }
}
.box-zdyj {
  flex: 1;
  overflow: auto;
  position: relative;
  padding-top: 50px;
}
.box1, .box2 {
  position: relative;
  width: 100%;
  height: 55%;
}
.box1 {
  padding-top: 42px;
}
.box2 {
  .scrollBox {
    border-top: 1px solid #e0e0e0;
  }
}
.box3 {
  padding: 0 15px;
  border-top: 1px solid #e0e0e0;
}
.zdList {
  .shzz {
    .info {
      width: 100%;
      height: 40px;
      .flex-start();
      .icon {
        width: 40px;
        height: 40px;
        img {
          display: block;
          height: 100%;
        }
      }
      .text {
        margin-left: 10px;
        .name {
          font-size: 14px;
          color: rgba(24, 144, 255, 0.85);
        }
        .time {
          font-size: 12px;
          color: rgba(153, 153, 153, 0.85);
        }
      }
    }
    .content {
      width: 90%;
      background: #f4faff;
      border-radius: 16px;
      border-top-left-radius: 0;
      padding: 10px 15px;
      margin-top: 10px;
      margin-bottom: 15px;
    }
  }
  .zdls {
    .info {
      width: 100%;
      height: 40px;
      .flex-end();
      .icon {
        width: 40px;
        height: 40px;
        img {
          display: block;
          height: 100%;
        }
      }
      .text {
        margin-right: 10px;
        text-align: right;
        .name {
          font-size: 14px;
          color: rgba(24, 144, 255, 0.85);
        }
        .time {
          font-size: 12px;
          color: rgba(153, 153, 153, 0.85);
        }
      }
    }
    .content {
      width: 90%;
      background: #f3f3f3;
      border-radius: 16px;
      border-top-right-radius: 0;
      padding: 10px 15px;
      margin-top: 10px;
      margin-bottom: 15px;
      margin-left: 10%;
    }
  }
}
.kfList {
  .title {
    border-top: 1px solid #e0e0e0;
  }
  .pszj {
    border-bottom: 1px solid #e0e0e0;
    padding: 5px 0;
    .info {
      width: 100%;
      height: 40px;
      .flex-between();
      .left {
        .flex-start();
        .icon {
          width: 40px;
          height: 40px;
          img {
            display: block;
            height: 100%;
          }
        }
        .text {
          .name {
            font-size: 14px;
            color: coral;
          }
          .time {
            font-size: 12px;
            color: rgba(153, 153, 153, 0.85);
          }
        }
      }

      .score {
        color: coral;
      }
    }
    .content {
      width: 100%;
      // padding-bottom: 24px;
      margin-top: 5px;
    }
  }
}
.zdForm {
  .list {
    width: 100%;
    .item {
      margin: 16px 0;
      .flex-center();
    }
    .yj {
      .flex-start-end();
      .input {
        // width: 160px;
        margin: 0 16px 0 0;
      }
    }
    .score {
      margin-top: 15px;
      .flex-start();
      .all {
        color: #ff0000;
      }
      .input {
        width: 160px;
        margin: 0 16px 0 0;
      }
    }
  }
}
.psForm {
  .list {
    width: 100%;
    .item {
      margin: 16px 0;
      .flex-center();
    }
    .score {
      margin-top: 15px;
      .flex-start();
      .all {
        color: #ff0000;
      }
      .input {
        width: 150px;
        margin: 0 16px 0 0;
      }
    }
  }
}
</style>
